<template>

  <n-form-item :label="component.description" :path="component.type" class="creative-component-form-item"
    :show-require-mark="buttonText.required">
    <n-switch class="h-label" v-model:value="component.switch" :disabled="buttonText.required">
    </n-switch>
  </n-form-item>
  <div v-if="component.switch" class="creative-component-secend-form-item">
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      :show-require-mark="buttonText.required" :rule="formRule.button_text">
      <div class='flex flex-1'>
        <label class="text-right mr-10 text-label">按钮文案</label>
        <n-select :options="optional" v-model:value="form.button_text"></n-select>
      </div>
    </n-form-item>

    <!-- jump_info -->
    <n-form-item :show-label="false" :path="component.type" class="creative-component-form-item"
      v-if="component.children && (component.children as any).jump_info && getJumpInfoComponent">
      <div class="flex flex-1">
        <label class="text-right mr-10 text-label">跳转落地页</label>
        <span>{{ getJumpInfoComponent.label }}</span>
      </div>
    </n-form-item>
  </div>

</template>

<script setup lang="ts">
import { computed, reactive, ref, toRef, unref, watch } from 'vue';
import { useStore } from '@/store';
import Component from '@/store/modules/adv/component';
import { NSwitch } from 'naive-ui';

import {
  NInput,
  NButton,
  useMessage,
  NSpace,
  NTooltip,
  NSelect,
  NFormItem,
} from 'naive-ui'
import { MAIN_JUMP_INFO } from '@/store/modules/adv/helper';
const store = useStore();

const creativor = computed(() => store.state.adv.modal.creativor);
const props = withDefaults(defineProps<{
  component: Component
  path: Array<any>
}>(), {});
const getJumpInfoComponent = computed(() => {
  return store.state.adv.modal.marketComponents[MAIN_JUMP_INFO]
});

const optional = computed(() => {
  const { enumeration } = component.value.children && component.value.children.button_text ? component.value.children.button_text.enum_property : {} as any;
  return (enumeration || []).map((item: any) => {
    return {
      ...item,
      label: item.value,
      value: item.value
    }
  })
})
const component = toRef<any, any>(props, 'component');
const childrenComponent = computed(() => component.value.children || {});
const buttonText = computed(() => childrenComponent.value.button_text || { require: false })

if (component.value.value.button_text) {
  component.value.switch = true;
} else {
  component.value.switch = buttonText.value.required;
}
const form = reactive({
  button_text: component.value.value.button_text || '',
});
watch(form, () => {
  store.commit('adv/UPDATE_ADV_TARGET_VALUE', {
    path: ['marketComponents', props.component.type],
    key: 'value',
    value: Object.assign({}, form)
  })
})


// const rule = reactive({
//   required: true,
//   trigger: 'change',
//   validator(_, __) {
//     if (component.value.switch && !form.button_text) {
//       return new Error('请选择按钮文案!')
//     }
//     return true;
//   }
// })

const formRule = reactive({
  button_text: {
    required: true,
    trigger: 'blur',
    validator(_, __) {
      if (!form.button_text) {
        return new Error('请选择按钮文案!')
      }
      return true;
    }
  },
})









</script>

<style lang="scss">
@import url('./style.scss');
</style>
